<template>
  <div id="search">
    <!-- 自定义表单 -->
    <el-form ref="form" :inline="true" :model="form" :rules="formRules">
      <el-form-item
        v-for="(domain, index) in form.domains"
        :key="domain.key">
        <el-form-item v-if="index!==0" label="1">
          <el-form-item :prop="'domains.' + index + '.value'">
            <el-input v-model="domain.value" style="width: 200px"/>
          </el-form-item>
        </el-form-item>
        <el-button v-if="index !== 0" @click.prevent="removeDomain(domain)">删除</el-button>
        <!-- 新增自定义搜索框 -->
        <el-dialog :visible.sync="dialogFormVisible" title="新增自定义字段">
          <el-form>
            <el-form-item :label-width="formLabelWidth" :rules="{required: true, message: '字段名不能为空', trigger: 'blur'}" label="字段名">
              <el-input v-model="domain.field" autocomplete="off" style="width:90%;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" :rules="{required: true, message: '字段值不能为空', trigger: 'blur'}" label="字段值">
              <el-input v-model="domain.value" autocomplete="off" style="width:90%"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddField">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="addDomain">新增自定义字段</el-button>
        <el-button @click.native="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '', // 搜索字段名
        value: '', // 搜索字段值
        domains: [{
          field: '',
          value: ''
        }]
      },
      formRules: {
        name: [{ required: true, message: '请选择要搜索的字段名', trigger: 'change' }],
        value: [{ required: true, message: '请输入你要搜索的值', trigger: 'blur' }]
      },
      formLabelWidth: '100px'
    }
  },
  mounted() {

  },
  methods: {
    // 保存当前表单数据
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置输入框内的所有数据
    resetForm: function() {
      this.$refs['form'].resetFields()
      console.log('重置')
    },
    // 删除新增自定义字段
    removeDomain(item) {
      var index = this.form.domains.indexOf(item)
      if (index !== 0) {
        this.form.domains.splice(index, 1)
      }
    },
    // 新增自义定字段
    addDomain() {
      this.dialogFormVisible = true
    },
    // 确认新增字段名  -- 传递参数
    submitAddField() {
      this.dialogFormVisible = false
      this.form.domains.push({
        value: '',
        field: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style scoped>
</style>
